<template>
  <a class="card-container">
    <div class="img-container">
      <img :src="cardData.imgUrl" />
    </div>
    <div>
      <div class="card-title">
        {{cardData.title}}
      </div>
      <div class="card-sub-title">
        <span>{{cardData.year}}</span>
        <span>{{cardData.distance}}</span>
      </div>
      <div class="card-price-bar">
        <span class="card-price">{{cardData.price}} 万</span>
        <span class="card-original-price">新车价 <i>{{cardData.originalPrice}} 万</i></span>
      </div>
    </div>
  </a>
</template>

<script>
export default {
  name: "",
  components: {},
  props: ["cardData"],
  data() {
    return {};
  },

  computed: {},

  methods: {}
};
</script>
<style lang='scss' scoped>
.card-container {
  display: flex;
  min-height: 0.8rem;
  padding: 0.2rem;
  border-bottom: 1px solid #eff2f6;
}
.img-container {
  width: 1.2rem;
  height: 0.8rem;
  margin-right: 0.16rem;
  & img {
    height: 100%;
    width: 100%;
    border-radius: 0.02rem;
  }
}
.card-title {
  color: #303741;
  margin-bottom: 0.1rem;
}
.card-sub-title {
  font-size: 0.11rem;
  color: #8f96a0;
  line-height: 0.12rem;
      overflow: hidden;
    margin-bottom: .1rem;
}
.card-price-bar {
      display: flex;
    align-items: center;
}
.card-price {
      font-size: .17rem;
    line-height: .18rem;
    color: #f56539;
    font-weight: 500;
    vertical-align: top;
    margin-top: -.01rem;
    padding-right: .025rem;
}
.card-original-price {
      color: #8f96a0;
    font-size: .11rem;
    display: inline-block;
    vertical-align: middle;
    line-height: .2rem;
    & i {
          text-decoration: line-through;
    padding-left: .02rem;
    }
}
</style>